<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: '50px',
      bgColor: 'pink',
      styleObj: {
        color: 'red', 
        fontSize: '50px', 
        "background-color": 'pink'
      }
    }
  },
}
  
</script>

<template>
  <div>
    <!-- 第一种：放置字符串 -->
    <p style="color:red">helloWorld</p>
    <!-- 第二种：放置对象 -->
    <!-- CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名： -->
    <!-- <P :style="{key:value}">helloWorld</P> -->
    <!-- <P :style="{key(css属性名):value(属性值，来自于data中的属性)}">helloWorld</P> -->
    <P :style="{color: activeColor, fontSize: fontSize, 'background-color': bgColor}">helloWorld</P>
    <P :style="styleObj">helloWorld</P>

    <!-- 第三种：数组 -->
    <p :style="[styleObj,{border: '5px solid blue'}]">helloWorld</p>
  </div>
</template>

<style> 

</style>
